<template>
  演示 webSQL 的操作方式<br>
  <div style="border:1px solid #999;width: 900px;margin: 0 auto;text-align:left;padding: 20px;">
    <input type="button" @click="add" value="添加"/> 
    <input type="button" @click="update" value="修改"/> 
    <input type="button" @click="del" value="删除"/>
    <input type="text" v-model="id"/> {{id}}
    <br>
    <input type="button" @click="update" value="获取一条记录"/><br>
    <template v-for="(item, index) in blogList" :key="index">
      {{index}} - {{item}}<br>
    </template>
    <hr>
    查询
    <input type="text" v-model="key"/> 页号：<input type="text" v-model="pager.pageIndex"/><br>
    总数：{{pager.pageTotal}}<br>
    <template v-for="(item, index) in pagerList" :key="index">
      {{index}} - {{item}}<br>
    </template>
  </div>
</template>

<script>
import { reactive, ref, watch } from 'vue'
import { webSQLVue } from '../../packages/index.js'

/**
 * 添加、修改、删除的代码
 */
const crud = (getAll) => {
  const { help, blog, discuss } = webSQLVue.useHelp()

  // 修改删除用的ID
  const id = ref(1)

  // 添加数据的演示
  const add = () => {
    // help的用法
    // 添加数据
    help.insert('blog', {
      title: '测试标题',
      addTime: new Date().valueOf(),
      // introduction: '这是博客的简介',
      // viewCount: 0,
      agreeCount: 0
    }).then((id) => {
      console.log('help 的方式添加记录，ID：',id)
    })

    // 表的用法
    blog.insert({
      title: '测试标题'
    }).then((id) => {
      console.log('blog 的方式添加记录，ID：',id)
    })
    getAll()

  }

  // 修改数据的演示
  const update = () => {
    // help的用法
    // 修改数据
    help.update('blog', {
      title: '修改标题',
      addTime: new Date().valueOf(),
      // introduction: '这是博客的简介',
      // viewCount: 0,
      agreeCount: 0
    }, id.value).then((id) => {
      console.log('help 的方式修改记录，ID：',id)
    })

    // 表的用法
    blog.update({
      title: '修改标题',
      addTime: new Date().valueOf(),
    }, id.value).then((id) => {
      console.log('blog 的方式修改记录，ID：',id)
    })
    getAll()
  }

  // 删除数据的演示
  const del = () => {
    // help的用法
    // 删除数据
    help.del('blog', id.value).then((id) => {
      console.log('help 的方式删除记录，ID：',id)
    })

    // 表的用法
    blog.del(id.value).then((id) => {
      console.log('blog 的方式删除记录，ID：',id)
    })
    getAll()
  }

  return {
    add, // 添加事件
    update, // 修改事件
    del, // 删除事件
    id // 删除、修改用主键
  }
}

/**
 * 查询和分页的代码
 */
const find = () => {
  const { help } = webSQLVue.useHelp()
  
  // 查询关键字
  const key = ref('')
  // 查询条件
  const query = reactive({
    addTime:[403, key.value]
  })
  // 分页信息
  const pager = reactive({
    pageTotal: 100, // 总数
    pageSize: 2,
    pageIndex: 1,
    orderBy: { id: false }
  })
  
  // 分页数据
  const pagerList = reactive([])
  
  // 获取分页数据
  const pagerData = () => {
    // 获取分页数据
    help.select('blog', {}, query, pager).then((data) => {
      // console.log('分页结果', data)
      pagerList.length = 0
      pagerList.push(...data)
    })
  }

  // 统计总数 + 获取分页数据
  const getPagerData = () => {
    // 统计总数
    help.selectCount('blog', query).then((count1) => {
      pager.pageTotal = count1
    })
    // 获取分页数据
    pagerData()
  }
  getPagerData()

  // 监听查询条件
  watch(() => key.value, () => {
    query.addTime[1] = key.value
    console.log('查询条件', query)
    getPagerData()
  },{deep:true})

  watch(() => pager.pageIndex, () => {
    console.log('分页触发', pager)
    getPagerData()
  },{deep:true})

  return {
    pagerList, // 分页数据
    pager, // 分页信息
    key // 查询条件
  }
}

export default {
  setup() {
    const { help, blog, discuss } = webSQLVue.useHelp()
    console.log('使用help', help)

    // 全部数据
    const blogList = reactive([])

    // 获取全部数据
    const getAll = () => {
      help.select('blog').then((data) => {
        blogList.length = 0
        blogList.push(...data)
      })
    }
    getAll()

    return {
      blogList, // 全部数据
      ...find(),
      ...crud(getAll)
    }
  }
}
</script>